<template>
  <div class="home_container">
    <div class="home_search">
      <van-search
        shape="round"
        background="#c00000"
        placeholder="请输入搜索关键词"
        disabled
        @click="goToSearch"
      />
    </div>
    <!-- 轮播图区域 -->
    <div class="swiper">
      <van-swipe :autoplay="3000" height="auto">
        <van-swipe-item
          v-for="(image, index) in swiperList"
          :key="index"
          @click="goToDetail(image)"
        >
          <img v-lazy="image.image_src" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 分类导航区域 -->
    <div class="nav_box">
      <div
        class="nav_item"
        v-for="(item, index) in navList"
        :key="index"
        @click="goToTarget(item)"
      >
        <img :src="item.image_src" alt="" />
      </div>
    </div>

    <!-- 楼层区域 -->
    <div class="floor_box">
      <div class="floor_item" v-for="item in floorList" :key="item.name">
        <div class="title">
          <img :src="item.floor_title.image_src" alt="" />
        </div>
        <div class="content">
          <div class="left">
            <img
              :src="item.product_list[0].image_src"
              :width="item.product_list[0].image_width | getRem"
              alt=""
              @click="geToGoodsList(item.product_list[0].name)"
            />
          </div>
          <div class="right">
            <div
              class="img"
              v-for="(imgItem, index) in item.product_list"
              :key="imgItem.name"
            >
              <template v-if="index !== 0">
                <img
                  :src="imgItem.image_src"
                  :width="imgItem.image_width | getRem"
                  alt=""
                  @click="geToGoodsList(imgItem.name)"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonTarBarVue from "@/components/CommonTarBar.vue";
import { Toast } from "vant";
export default {
  name: "Home",
  data() {
    return {
      swiperList: [],
      navList: [],
      floorList: [],
    };
  },
  computed: {},
  filters: {
    getRem(num) {
      // 获取html的font-size
      let htmlFontSize = getComputedStyle(window.document.documentElement)[
        "font-size"
      ];
      let result = htmlFontSize.slice(0, -2);
      // console.log((num / 40) * result);
      return (num / 40) * result;
    },
  },
  components: {
    CommonTarBarVue,
  },
  methods: {
    firstCreate(){
      // 重置window的滚动距离
      window.scrollTo(0, 0);
    },
    // 获取轮播图数据
    async getSwiperList() {
      if(JSON.parse(sessionStorage.getItem('swiperList'))){
        this.swiperList = JSON.parse(sessionStorage.getItem('swiperList'))
        return
      }
      const { data: res } = await this.$http.get(
        "/api/public/v1/home/swiperdata"
      );
      if (res.meta.status !== 200) return Toast.fail("数据请求失败");
      this.swiperList = res.message;
      sessionStorage.setItem('swiperList' , JSON.stringify(res.message))
      // console.log(res);
    },
    // 获取分类导航数据
    async getNavList() {
      if(JSON.parse(sessionStorage.getItem('navList'))){
        this.navList = JSON.parse(sessionStorage.getItem('navList'))
        return
      }
      const { data: res } = await this.$http.get(
        "/api/public/v1/home/catitems"
      );
      if (res.meta.status !== 200) return Toast.fail("数据请求失败");
      this.navList = res.message;
      sessionStorage.setItem('navList' , JSON.stringify(res.message))
      // console.log(res);
    },
    // 获取楼层数据
    async getFloorList() {
      if(JSON.parse(sessionStorage.getItem('floorList'))){
        this.floorList = JSON.parse(sessionStorage.getItem('floorList'))
        return
      }
      const { data: res } = await this.$http.get(
        "/api/public/v1/home/floordata"
      );
      if (res.meta.status !== 200) return Toast.fail("数据请求失败");
      this.floorList = res.message;
      sessionStorage.setItem('floorList' , JSON.stringify(res.message))
      // console.log(res);
    },

    goToSearch() {
      this.$router
        .push({
          name: "search",
        })
        .catch((err) => err);
    },
    goToDetail(item) {
      console.log(item.goods_id);
      this.$router.push(`/detail/${item.goods_id}`);
    },
    goToTarget(item) {
      if (item.name === "分类") {
        this.$router.push({
          name: "cate",
        });
      } else {
        return;
      }
    },
    geToGoodsList(name) {
      this.$router.push(`/goodsList/${name}`);
    },
  },
  created() {
    this.firstCreate()
    this.getSwiperList();
    this.getNavList();
    this.getFloorList();
  },

};
</script>

<style lang="less" scoped>
.home_container {
  // height: 1000px;
  margin-bottom: 80px;
  .swiper {
    // width: 100vw;
    height: 8.25rem;
    /deep/ .van-swipe {
      width: 100%;
      height: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .nav_box {
    display: flex;
    justify-content: space-around;
    .nav_item {
      margin: 10px 0px;
      img {
        width: 3.2rem;
      }
    }
  }

  .floor_box {
    margin: 10px 0;
    .title {
      img {
        width: 100%;
      }
    }
    .floor_item {
      margin: 10px 0;
      .content {
        display: flex;
        justify-content: space-between;
        .right {
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-between;
          padding-left: 7px;
          img {
            box-sizing: content-box;
            padding-right: 7px;
          }
        }
      }
    }
  }
}
</style>